<template>
  <div>
    <div class="search" >
    <input v-focus type="text" v-model="inpVal" class="inp" name="" id="" placeholder="搜索歌曲、歌手、专辑">
    <!-- <span class="del"></span> -->
  </div>
  <!-- 热门搜索 -->
  <div class="hot-search" v-if="isShow">
    <div class="title">热门搜索</div>
    <div class="container">
    <div class="item" v-for="(item,index) in hots" :key="index" @click="goSongPage(item)">{{item.first}}</div>
    </div>
  </div>
  <!-- 展开搜索 -->
  <div class="message" v-else>
    <div class="name">搜索"{{inpVal}}"</div>
    <div class="info" v-for="(item,index) in list" :key="index" @click="goSongPage(item)"><img src="@/assets/images/search.png" alt="">{{item.keyword}}   </div>
    <div>{{infor}}</div>
   
  </div>
  </div>
</template>

<script>
export default {
    name:'Search',
    directives:{
      focus:{
        inserted:function(el)
        {
          el.focus()
        }
      }
    },
    created(){
      this.HotSearch();
    },
    data() {
      return {
        hots:[],
        isShow:true,
        inpVal:'',
        list:[],
        infor:'',
      }
    },
    methods:{
      async HotSearch(){
        let res=await this.$api.getHotSearch();
        console.log(res.data);
        this.hots=res.data.result.hots;
           console.log(this.hots);
      },
      async getSearch(keywords){
        let res=await this.$api.Search(
          {
            keywords,
            type:'mobile'
          }
        );
        if(res.data.result.allMatch){
        this.list=res.data.result.allMatch;
        this.infor='';
        }else{
          this.list=[];
          this.infor='查无数据'
        }
      },
      goSongPage(val){
        this.$router.push({
          name:'songpage',
          params:{id:1,title:val.first||val.keyword}
        })
      }
    },
    watch:{
      inpVal(val){
        if(val){
          this.isShow=false;
          this.getSearch(val);
        }else{
          this.isShow=true
        }
      }
    }

}
</script>

<style lang="less" scoped>
.search{
  border-bottom:1px solid #eee;
  padding:.3rem;
  input{
    outline:0;
    border:0;
    width: 100%;
    box-sizing: border-box;
    background: #eee;
    height:0.6rem;
    border-radius: .2rem;
    line-height: 0.6rem;
    padding-left: .2rem;
  }
}
.hot-search{
  padding: 15px 10px 0;
.title{
  font-size: 12px;
    line-height: 12px;
    color: #666;
}
.container{
  margin: 10px 0 7px;
  .item{
    display: inline-block;
    height: 32px;
    margin-right: 8px;
    margin-bottom: 8px;
    padding: 0 14px;
    font-size: 14px;
    line-height: 32px;
    color: #333;
    border: 1px solid #eee;
    border-radius: 32px;
  }
}
}
.name{
  color:skyblue;
  padding-left: .2rem;
  line-height: .9rem;
  height:.9rem;
  border-bottom: 1px solid #eee;
}
.info{
  padding-left: 0.2rem;
    line-height: 0.9rem;
    color: #333;
    border-bottom: 1px solid #eee;
    img{
      width:.4rem
    }
}
</style>